<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box" style="height: 200px;width:200px;background-color: aqua;"></div>
    <script>
        /*
            注意触摸事件仅仅适用于移动端，因为你的电脑不见得支持触摸

            ontouchstart: 用户触碰到的时候
            ontouchmove: 用户触碰到并且滑动的时候
            ontouchend: 用户触碰完离开的时候

            ontouchcancel: 这个用的比较少，举个例子，比如你正在触摸你的屏幕，突然一个电话进来了，所以你的这个触摸也就自动没了或者说强行取消了，这个时候就会触发这个事件
        */

        let box = document.querySelector('.box')
        console.log(box);

        box.ontouchstart = ()=>{
            console.log('碰到了');
        }

        box.ontouchmove = ()=>{
            console.log('滑动');
        }

        box.ontouchend = ()=>{
            console.log('离开');
        }
    </script>
</body>
</html>